<template>
  <div class="video__container">
    <div>
      <VideoPlayer :options="getVideoOptions" />
    </div>
    <div v-if="getAirportInfo.status === 10" class="video__info">
      <div v-for="(item,index) in list" :key="index" class="info__item">
        <img class="item__icon" :src="getImgUrl(item.icon)" alt="">
        <div class="item__value"><n-ellipsis style="max-width: 60px">{{ getDroneMsg(item.key) }}</n-ellipsis></div>
        <div class="item__label"><n-ellipsis style="max-width: 60px">{{ item.label }}</n-ellipsis></div>
      </div>
    </div>
    <div v-if="getAirportInfo.status !== 10" class="video__info">
      <div v-for="(item,index) in airList" :key="index" class="info__item">
        <img class="item__icon" :src="getAirImgUrl(item.icon)" alt="">
        <div class="item__value"><n-ellipsis style="max-width: 60px">{{ getAirportMsg(item.key) }}{{ item.unit }}</n-ellipsis></div>
        <div class="item__label"><n-ellipsis style="max-width: 60px">{{ item.label }}</n-ellipsis></div>
      </div>
    </div>
    <div class="video__close">
      <n-icon size="24" @click="handleClose"><Close /></n-icon>
    </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import { Close } from '@vicons/ionicons5'
import { defineComponent, reactive, toRefs, computed } from 'vue'
export default defineComponent({
  name: 'VideoModal',
  components: { VideoPlayer, Close },
  props: {
    airportInfo: {
      type: Object,
      default: () => {}
    },
    airportMsg: {
      type: Object,
      default: () => {}
    },
    droneMsg: {
      type: Object,
      default: () => {}
    },
    airportUrl: {
      type: String,
      default: null
    }
  },
  emits: { 'update:visible': null },
  setup(props, { emit }) {
    const data = reactive({
      list: [
        { label: '高度', key: 'alt', icon: 'height' },
        { label: 'GPS', key: 'gpssingal', icon: 'gps' },
        { label: '电池电量', key: 'voltage', icon: 'battery' },
        { label: '速度', key: 'hspeed', icon: 'speed' },
        { label: '里程', key: 'mileage', icon: 'mileage' },
        { label: '机场距离', key: 'distToHome', icon: 'distance' },
        { label: '遥控信号', key: 'tsingal', icon: 'signal' }
      ],
      airList: [
        { label: '风速', key: 'wspd', icon: 'wind', unit: 'm/s' },
        { label: '风向', key: 'wdirName', icon: 'north', unit: '' },
        { label: '大气压力', key: 'hpa', icon: 'atmosPressure', unit: 'Mpa' },
        { label: '空气湿度', key: 'hum', icon: 'airHumidity', unit: '%rh' },
        { label: '降雨量', key: 'rainfull', icon: 'rainfall', unit: 'mm' },
        { label: '空气温度', key: 'tmp', icon: 'airTemperature', unit: '℃' }
      ]
    })

    const getAirportInfo = computed(() => {
      return {
        ...props.airportInfo
      }
    })

    const getVideoOptions = computed(() => {
      console.log(props.airportInfo?.status !== 10 ? props.airportUrl : props.airportInfo.aipullUrl)
      return {
        videoUrl: props.airportInfo?.status !== 10 ? props.airportUrl : props.airportInfo.aipullUrl,
        videoTitle: null,
        live: true
      }
    })

    const getAirportMsg = computed(() => {
      return (key) => {
        return props.airportMsg?.[key] || '--'
      }
    })
    const getDroneMsg = computed(() => {
      return (key) => {
        return props.droneMsg?.[key] || '--'
      }
    })

    const handleClose = () => {
      emit('update:visible', false)
    }

    const getImgUrl = (src) => {
      return new URL(`../../../assets/icon/${src}.png`, import.meta.url).href
    }
    const getAirImgUrl = (src) => {
      return new URL(`../../../assets/gis/${src}.png`, import.meta.url).href
    }

    return {
      ...toRefs(data),
      getAirportInfo,
      getVideoOptions,
      getAirportMsg,
      getDroneMsg,
      getImgUrl,
      getAirImgUrl,
      handleClose
    }
  }
})

</script>
  <style scoped lang='scss'>
  .video__container{
    width: 630px;
    background: rgba(34, 34, 34, 1);
    position: relative;
    .video__info{
      height: 95px;
      background: rgba(62, 62, 62, 1);
      margin: 8px 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .info__item{
        width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .item__icon{
          display: block;
          width: 24px;
          height: 24px;
        }
        .item__value{
          color: rgba(255, 255, 255, 1);
        }
        .item__label{
          color: rgba(139, 139, 139, 1);
        }
      }
    }
    .video__close{
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 99;
      .n-icon{
        cursor: pointer;
      }
    }
  }
  </style>

